<template>
  <div class="page">
    <el-container> 
      <el-aside :width="asideWidth">
        <el-menu :default-active="activeIndex" mode="vertical" @select="selectNav" :collapse="isCollapse">
          <template v-if="menu.length != 0">
            <el-menu-item :index="item?.id" :key="item?.id" v-for="(item,index) in menu" >
              <i :class="item?.iconName"></i>
              <span slot="title">{{item?.title}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <div>
            <i :class="!isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold' " style="cursor:pointer" @click="fold"></i>
            <span>&nbsp;&nbsp;{{currentNav}}</span>
          </div>
          <el-popover class="avatar" placement="bottom" trigger="hover">
            <div slot="reference">
              <img class="avatarImg" :src="userInfo?.imageUrl" >
              <i class="el-icon-caret-bottom" style="cursor:pointer"></i>
            </div>
            <div class="nav navBottom" @click="showUserInfo">个人信息</div>
            <div class="nav navTop" @click="logout">退出登录</div>
          </el-popover>
        </el-header>

        <el-dialog
          title="个人信息"
          :visible.sync="dialogVisible"
          width="50%"
        >
          <el-form ref="userInfoForm" :model="userInfo" label-width="80px">
            <el-form-item label="我的头像" style="height:60px">
              <div class="avatar_box">
                <img class="img" :src="userInfo.imageUrl" @click="changeImg">
                <!-- <i class="el-icon-arrow-right" style="cursor: pointer;" @click="changeImg"></i> -->
              </div>
            </el-form-item>
            <el-form-item label="姓名" >
              <el-input v-model="userInfo.name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" >
              <el-input v-model="userInfo.phoneNumber" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="我的身份" >
              <el-input v-model="roles[userInfo.role]" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">保存</el-button>
          </span>
        </el-dialog>

        <el-main>
          <!-- <div class="gap"></div> -->
          <component :is="componentId"></component>
        </el-main>
      </el-container>

    </el-container>

    
  </div>
</template>

<script>
import Notice from "@/views/notice/index.vue"
import Repair from "@/views/repair/index.vue"
import SeeAPatient from "@/views/seeAPatient/index.vue"
import UserManage from "@/views/userManage/index.vue"
import Report from "@/views/report/index.vue"
import Xqdt from "@/views/xqdt/index.vue"

export default {

  data() {
    return {
      activeIndex:"1",
      asideWidth:"200px",
      menuRule:{
        doctor:[
          {
            id:"1",
            iconName:"el-icon-chat-dot-round",
            component:SeeAPatient,
            title:"在线问诊"
          },
        ],
        committee:[
          {
            id:"1",
            iconName:"el-icon-data-analysis",
            component:Xqdt,
            title:"小区动态"
          },
          {
            id:"2",
            iconName:"el-icon-message-solid",
            component:Notice,
            title:"小区通知"
          },
          {
            id:"3",
            iconName:"el-icon-document-checked",
            component:Report,
            title:"问题上报"
          },
        ],
        repair:[
          {
            id:"1",
            iconName:"el-icon-s-order",
            component:Repair,
            title:"在线接单"
          },
        ],
        admin:[
          {
            id:"1",
            iconName:"el-icon-data-analysis",
            component:Xqdt,
            title:"小区动态"
          },
          {
            id:"2",
            iconName:"el-icon-user-solid",
            component:UserManage,
            title:"员工管理"
          },
        ]
      },
      /*menu:[
        {
          id:"1",
          iconName:"el-icon-user-solid",
          component:UserManage,
          title:"员工管理"
        },
        {
          id:"2",
          iconName:"el-icon-message-solid",
          component:Notice,
          title:"小区通知"
        },
        {
          id:"3",
          iconName:"el-icon-s-order",
          component:Repair,
          title:"在线接单"
        },
        {
          id:"4",
          iconName:"el-icon-chat-dot-round",
          component:SeeAPatient,
          title:"在线问诊"
        },
        {
          id:"5",
          iconName:"el-icon-document-checked",
          component:Report,
          title:"问题上报"
        }
      ],*/
      menu:[],
      isCollapse:false,
      userInfo:{},
      dialogVisible:false,
      roles:{
        "doctor":"医生",
        "admin":"管理员",
        "committee":"居委会",
        "repair":"维修师傅"
      }
    }
  },    
  methods: { 
    menuInit(){
      let role = this.$store.state.userInfo.role

      this.menu = this.menuRule[role]
    },
    selectNav(index,indexPath){
      this.activeIndex = index
    },
    fold(){
      this.isCollapse = !this.isCollapse

      if(this.isCollapse){
        this.asideWidth = "70px"
      }else{
        this.asideWidth = "200px"
      }
    },
    showUserInfo(){
      this.dialogVisible = true
    },
    // 退出登录
    logout(){
      let {_id} = this.$store.state.userInfo

      this.$API.staff.logout(_id).then(res=>{
        if (res.code == 201) {
          this.$store.state.userInfo = null
          this.$router.push({
            path:"/login"
          })
        }
      }).catch(err=>{
        console.log(err);
      })
      
    },
    changeImg(){
      console.log("更换图片");
    },
  },
  computed:{
    componentId(){
      for(let i=0;i < this.menu.length;i++){
        if (this.menu[i].id === this.activeIndex) {
          return this.menu[i].component
          break
        }
      }
    },
    currentNav(){
      let i = parseInt(this.activeIndex) - 1
      
      return this.menu[i].title
    }
  },
  components:{
    Notice,
    Repair,
    SeeAPatient,
    UserManage,
    Report
  },
  created(){
    this.menuInit()
  },
  mounted(){
    this.$nextTick(()=>{
      this.userInfo = this.$store.state.userInfo
    })

  },
  beforeDestroy(){
    this.logout()
  }
}
</script>

<style lang="less">
  .el-popover{
    min-width: 60px;
    .nav{
      text-align: center;
      cursor: pointer; 
    }
    .navTop{
      padding-top: 10px;
    }
    .navBottom{
      padding-bottom: 10px;
      border-bottom: 1px solid #e6e6e6;
    }
  }
  .avatar_box{
    widows: 380px;
    height: 60px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    .img{
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 15px;
      cursor: pointer;
    }
  }
</style>
<style lang='less' scoped>
  .el-aside{
    height: 100vh;
    padding-top: 15px;
    box-sizing: border-box;
    border-right:solid 1px#e6e6e6;
    overflow: hidden;
    .el-menu{
      border-right: none;
    }
  }
  .el-header{
    display:flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .avatarImg{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
    }
  }
  .el-main{
    .gap{
      margin-top: 20px;
    }
  }
</style>